<template>
  <div class="shop_items_tobar">
    <div class="shop_items_tobar_mid">
      <div class="shop_items_tobar_mid_logo">
        <router-link to="/"><img src="../../assets/images/logo/xiaobaishop_0.png"></router-link>
      </div>
      <span class="shop_items_tobar_middle"></span>
      <div class="shop_items_tobar_mid_shop_box">
        <div class="shop_items_tobar_mid_shop_box_name">
          <span><router-link :to="{path:'shop',query:{id:1}}">小白官方旗舰店</router-link></span>
          <div class="shop_items_tobar_mid_shop_box_name_lable">品牌直销</div>
        </div>
      </div>
      <div class="shop_items_tobar_mid_shop_box_search">
        <div class="shop_items_tobar_mid_shop_box_search_box">
          <input name="shop_keywords" id="shop_keywords" type="text" placeholder="商品"  @change="keywords_change"/>
          <div class="shop_items_tobar_mid_shop_box_search_box_btn" @click="search('this')">搜本店</div>
        </div>
        <div class="shop_items_tobar_mid_shop_box_search_box_btn shop_items_search_btn" @click="search('all')">搜小白</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "shop_items_topbar",
  data(){
    return {
      keyword:''
    }
  },
  methods: {
    keywords_change(){
      this.keyword = document.getElementsByName("shop_keywords")[0].value
    },
    search(flag) {
      if (this.keyword==""){
        document.getElementById("shop_keywords").style.animation = "input_null 0.4s infinite"
        setTimeout(()=>{
          document.getElementById("shop_keywords").style.animation = ""
        },1000)
        return
      }
      console.log(this.keyword)
      if (flag === 'all') {
        //  搜索全局
      }
      if (flag === 'this') {
        //  搜索本店
      }
    }
  }
}
</script>

<style scoped>
.shop_items_search_btn {
  height: 44px !important;
  background-color: #c81623 !important;
}

.shop_items_tobar_mid_shop_box_search_box input {
  width: calc(100% - 80px);
  height: 100%;
  float: left;
  outline: unset;
  border: unset;
  padding-left: 10px;
}

.shop_items_tobar_mid_shop_box_search_box_btn {
  width: 70px;
  height: 100%;
  float: right;
  background-color: #442f1a;
  text-align: center;
  line-height: 40px;
  color: #E4E7ED;
  font-size: 14px;
  cursor: pointer;
  font-family: "新宋体", serif;
}

.shop_items_tobar_mid_shop_box_search_box {
  width: 420px;
  height: 100%;
  float: left;
  border: 2px solid #442f1a;
}

.shop_items_tobar_mid_shop_box_search {
  width: 500px;
  float: right;
  height: 40px;
  margin: 29px 0px;
}

.shop_items_tobar_middle {
  width: 1px;
  height: 50px;
  margin: 25px 10px 0px 10px;
  background-color: #958a7e;
  display: block;
  float: left;
}

.shop_items_tobar_mid_shop_box_name_lable {
  width: auto;
  height: 20px;
  padding: 0px 5px 0px 5px;
  border-radius: 3px;
  border: 1px solid #442f1a;
  background-color: #958a7e;
  color: #E4E7ED;
  font-size: 10px;
  transform: scale(0.83);
  font-family: "新宋体", serif;
  text-align: center;
  line-height: 20px;
  float: left;
}

.shop_items_tobar_mid_shop_box_name span a:hover{
  color: #958a7e;
}
.shop_items_tobar_mid_shop_box_name span a{
  line-height: 20px;
  font-size: 12px;
  color: #442f1a;
  transition-duration: 0.3s;
}
.shop_items_tobar_mid_shop_box_name span {
  width: 100%;
  height: 20px;
  display: block;
  float: left;
  margin-top: 20px;
}

.shop_items_tobar_mid_shop_box_name {
  width: 100px;
  height: 70px;
  position: relative;
  top: 15px;
}

.shop_items_tobar_mid_shop_box {
  width: 150px;
  height: 100%;
  float: left;
}

.shop_items_tobar_mid_logo img {
  width: 104px;
  height: 64px;
  position: relative;
  top: 17px;
  left: 17px;
}

.shop_items_tobar_mid_logo {
  width: 140px;
  height: 100%;
  margin-right: 20px;
  float: left;
}

.shop_items_tobar_mid {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}

.shop_items_tobar {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #e8e2e0;
  /*position: sticky;*/
  /*top: -3px;*/
  /*scroll-behavior:smooth;*/
  display: block;
  position: -webkit-sticky;
  background-color: #ffffff;
  z-index: 100;
}
</style>
